
/*
* margin/padding
*/
@spacing-width: 4px;
.spacing-size(auto, auto, e('margin'), e('m')) !important; // auto
.spacing-size(0, 0, e('margin'), e('m')) !important; // 0

each(range(16),.(@v,@k){
  @key: @k;
  @n-key: ~'n@{key}';
  @value: @v * @spacing-width;
  @n-value: 0 - @value;

  .spacing-size(@key, @value, e('margin'), e('m')) !important;
  .spacing-size(@n-key, @n-value, e('margin'), e('m')) !important;
}); // 1-16/-1--16

.spacing-size(0, 0, e('padding'), e('p')) !important; // 0

each(range(16),.(@v,@k){
  @key: @k;
  @value: @v * @spacing-width;
  
  .spacing-size(@key, @value, e('padding'), e('p')) !important;
}); // 1-16

.spacing-size(@key,@value,@property,@short-property) {
  .@{short-property}a-@{key} {
    @{property}: @value;
  }

  .@{short-property}x-@{key} {
    @{property}-left: @value;
    @{property}-right: @value;
  }

  .@{short-property}y-@{key} {
    @{property}-top: @value;
    @{property}-bottom: @value;
  }

  .@{short-property}t-@{key} {
    @{property}-top: @value;
  }

  .@{short-property}r-@{key} {
    @{property}-right: @value;
  }

  .@{short-property}b-@{key} {
    @{property}-bottom: @value;
  }

  .@{short-property}l-@{key} {
    @{property}-left: @value;
  }
}

/*
* border
*/
@border-radius-root: 4px;

@rounded: {
  0: 0;
  sm: @border-radius-root / 2;
  null: @border-radius-root;
  lg: @border-radius-root * 2;
  xl: @border-radius-root * 6;
  pill: 9999px;
  circle: 50%;
};

each(@rounded,{
  & when not(@key = null){
    .rounded-size(~'-@{key}',@value) !important;
  }
  & when(@key = null){
    .rounded-size(~'',@value) !important;
  }
});

.rounded-size(@key,@value) {
  .rounded@{key} {
    border-radius: @value;
  }

  .rounded-t@{key} {
    border-top-left-radius: @value;
    border-top-right-radius: @value;
  }

  .rounded-r@{key} {
    border-top-right-radius: @value;
    border-bottom-right-radius: @value;
  }

  .rounded-b@{key} {
    border-bottom-left-radius: @value;
    border-bottom-right-radius: @value;
  }

  .rounded-l@{key} {
    border-top-left-radius: @value;
    border-bottom-left-radius: @value;
  }

  .rounded-tl@{key} {
    border-top-left-radius: @value;
  }

  .rounded-tr@{key} {
    border-top-right-radius: @value;
  }

  .rounded-bl@{key} {
    border-bottom-left-radius: @value;
  }

  .rounded-br@{key} {
    border-bottom-right-radius: @value;
  }
}

/*
* float
*/
.float-align(left);
.float-align(right);
.float-align(none);

.float-align(@direction) {
  .float-@{direction} {
    float: @direction;
  }
}

/*
* text
*/
.text-align(left) !important;
.text-align(center) !important;
.text-align(right) !important;
.text-align(justify) !important;

.text-align(@direction) {
  .text-@{direction} {
    text-align: @direction;
  }
}

@font-weights: {
  black: 900;
  bold: 700;
  medium: 500;
  regular: 400;
  light: 300;
  thin: 100;
};

each(@font-weights,{
  .font-weight(@key, @value)
});

.font-weight(@key,@value) {
  .font-weight-@{key} {
    font-weight: @value;
  }
}

.font-italic {
  font-style: italic !important;
}

.font-normal {
  font-style: normal !important;
}

.text-ellipsis {
  .textOverflow();
}
